<template>
 <div>
<div class="container_hand">
        <span class="container_hand_letf">说明：目前支持学科和关键字条件筛选</span>
        <el-button type="success" class="container_hand_right" @click="$router.push('new')">新增试题</el-button>
      </div>
      <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="学科">
        <el-select v-model="form.subjectID" placeholder="请选择">
          <el-option v-for="item in subjectList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级目录">
        <el-select v-model="form.catalogID" placeholder="请选择">
          <el-option v-for="item in catalogueList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select> </el-form-item
      ><el-form-item label="标签">
        <el-select v-model="form.tags" placeholder="请选择">
          <el-option v-for="item in labelList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关键字">
        <el-input
          v-model="form.keyword"
          placeholder="根据题干搜索"
        ></el-input> </el-form-item
      ><el-form-item label="试题类型">
        <el-select v-model="form.questionType" placeholder="请选择">
          <el-option v-for="item in questionType" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select> </el-form-item
      ><el-form-item label="难度">
        <el-select v-model="form.difficulty" placeholder="请选择">
          <el-option v-for="item in difficulty" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select> </el-form-item
      ><el-form-item label="方向">
        <el-select v-model="form.direction" placeholder="请选择">
          <el-option v-for="item in direction" :key="item" :label="item" :value="item"></el-option>
        </el-select> </el-form-item
      ><el-form-item label="录入人">
        <el-select v-model="form.creatorID" placeholder="请选择">
          <el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题目备注">
        <el-input
          v-model="form.remarks"
        ></el-input> </el-form-item
      ><el-form-item label="企业简称">
        <el-input
          v-model="form.shortName"
        ></el-input> </el-form-item
      ><el-form-item label="城市">
        <el-select v-model="form.province" placeholder="请选择" @change="handleProvince">
          <el-option v-for="item in citySelect.province" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-select v-model="form.city" placeholder="请选择">
        <el-option v-for="item in citySelect.cityDate" :key="item" :label="item" :value="item"></el-option>
      </el-select>
      <el-form-item>
        <el-button type="primary" @click="clearAway" >清除</el-button>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>
    </el-form>
 </div>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys.js'
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
import { simple } from '@/api/hmmm/subjects.js'
import { simple as catalogue } from '@/api/hmmm/directorys.js'
import { simple as label } from '@/api/hmmm/tags.js'
import { simple as userSimple } from '@/api/base/users.js'
export default {
  name: 'searchBox',
  props: ['total'],
  data () {
    return {
      form: {
        subjectID: '',
        difficulty: '',
        questionType: '',
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: ''
      },
      citySelect: {
        province: [],
        cityDate: []
      },
      subjectList: [],
      catalogueList: [],
      labelList: [],
      userList: [],
      difficulty,
      questionType,
      direction
    }
  },
  async created () {
    const { data } = await simple()
    this.subjectList = data
    this.getCityData()
    this.handleProvince()
    const res = await userSimple()
    this.userList = res.data
  },
  methods: {
    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
    },
    clearAway () {
      for (const key in this.form) {
        this.form[key] = ''
      }
      this.$emit('clearAway')
    },
    // 搜索
    onSubmit () {
      const obj = {
        // subjectID: this.form.subjectID,
        page: 1,
        pagesize: 10,
        keyword: this.form.keyword
      }
      this.$emit('onSubmit', obj)
    }
  },
  watch: {
    form: {
      deep: true,
      async  handler (newval, oldval) {
        const catalogueData = await catalogue({ subjectID: newval.subjectID })
        this.catalogueList = catalogueData.data
        const labelData = await label({ subjectID: newval.subjectID })
        this.labelList = labelData.data
      }
    }
  }
}
</script>

<style scoped lang='less'>
.container_hand{
  position: relative;
  margin-bottom: 30px;
  .container_hand_right{
    position: absolute;
    right: 0;
    width: 96px;
    height: 31px;
  }
  .container_hand_letf{
    font-size: 12px;
    color: #ffc0cb;
  }
}
.uesrs_main_statistics {
  font-size: 13px;
  background-color: #f4f4f5;
  color: #909399;
  padding: 10px 20px;
}
</style>
